<template>
  <div>
    <div>
      <input
          type="checkbox"
          id="agree"
          v-model="isAgreed"
          @change="toggleAgreement"
      />
      <label for="agree">
        我同意 <a href="https://kdocs.cn/l/csMQwYTLgpIh" class="agreement-link" target="_blank">迅联用户协议与隐私政策</a>
      </label>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, watch } from 'vue';

export default defineComponent({
  name: 'UserAgreement',
  setup(props, { emit }) {
    const isAgreed = ref<boolean>(false);

    // 切换协议同意状态
    const toggleAgreement = () => {
      emit('agree', isAgreed.value);
    };

    // 监听协议状态变化
    watch(isAgreed, (newValue) => {
      emit('agree', newValue); // 当同意状态改变时，发出事件
      console.log("isAgreed", isAgreed.value);
      localStorage.setItem('is_agree', String(isAgreed.value));
    });

    return {
      isAgreed,
      toggleAgreement,
    };
  },
});
</script>

<style scoped>
.agreement-link {
  color: rgb(92,84,250); /* 设置链接颜色为蓝色 */
  text-decoration: underline; /* 添加下划线 */
}

.agreement-link:hover {
  color: darkblue; /* 设置悬停时的颜色 */
}
</style>
